<!--Page for displaying a specific clan-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Clan - Comics.US</title>
<link rel="stylesheet" href="../template.css" type="text/css" />

</head>
<body style="background: transparent url('../background/bg1t.png') no-repeat fixed center top">

<div id="outer_container">
  <div id="inner_container">
    <div id="header_wrapper">


      <div id="login"><!--Display username if logged in-->
        Welcome, {{username}}
      </div>  
    </div>
    <div id="navigator_container"><!--Links on top of page-->
      		<div id="navigator"><a href="../home" id="gl1" class="glink"> Home  |   </a><a href="../list/comics/1" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);"> Comics  |   </a><a href="../list/fiction/1" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);"> Fictions  |   </a><a href="../list/gallery/1" id="gl4" class="glink" onmouseover="ehandler(event,menuitem3);"> Gallery  |   </a><a href="../list/clan/1" id="gl5" class="glink" onmouseover="ehandler(event,menuitem3);"> Clans  |   </a><a href="../list/people/1" id="gl7" class="glink" onmouseover="ehandler(event,menuitem3);"> People  |   </a><a href="../profile/{{username}}" id="gl6" class="glink" onmouseover="ehandler(event,menuitem3);"> Profile </a></div>


      <div id="search_container"><!--Search area-->
        <form id="form2" name="form2" method="post" action="">
          <label>
            <input type="text" name="textfield3" id="textfield3" />
            <input type="submit" name="button" id="button" value="Search" width="15px" />
          </label>
        </form>
      </div>
    </div>
    <div id="listing_header_container">
      <p>Breadcrumb (remain the same for all pages)</p>
    </div>
    <div id="specific_clan_listing">
    	<table border="0" cellpadding="0" cellspacing="0" style="width: 960px; height: 646px">
	<!-- MSTableType="layout" -->
	<tr>
		<td msopnltype="NavBody" rowspan="2" style="width: 240px">
		<!-- MSCellType="NavBody" -->
		<!--Table to display information about the clan-->
		<div style="width: 98%; height:98%">
			<div style="text-align:center; height:15px; font-weight: bold">Clan Name</div>
			<div style="text-align:center; height:15px; font-weight: bold">{{clanName}}</div>
			<hr style="color:black" />
			<div style="t;text-align:center; height: 100px;">
			<img src="../clanpics/{{clanName}}.jpg" style="height:100px"/></div>
			<div style="text-align:center; height:25px; font-weight: bold">Introduction</div>
			<div style="text-align:center; height:25px; font-weight: bold"><a href="{{clanName}}/join" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Join This clan</a></div><!--Link to join clan-->
			<div style="height:72%; width:100%;background:white">{{clanIntro}}</div>
		</div>
		&nbsp;</td>
		<td style="height: 323px" valign="top">
		<!-- MSCellType="ContentBody" -->
		<div style="width: 100%; height:100%"><!--Area where clan can add content-->
			<div style="float: left; width: 65%; height:100%">
				<div  style="height:32%;width:98%;border:thin black solid;">
				<a href="#">content</a>
				</div>
				<div  style="height:32%;width:98%;border:thin black solid;">
				<a href="#">some more content</a>
				</div>
				<div  style="height:32%;width:98%;border:thin black solid;">
				<a href="#">even more content these things are links to content</a>
				</div>

			</div>
			<div style="float: right; width: 34%; height:100%">
				<div style="text-align:center; height:15px; font-weight: bold">Clan Rule</div>
				<hr style="color:black" />
				<div style="height:310px; width:98%;background:white">
				
					<ol>
						<li>{{clanRule}}</li>
					</ol>
				
				</div>
			</div>
		</div>
		&nbsp;</td>
			</tr>
			<tr>
		<td style="height: 323px; width: 720px" valign="top">
		<!-- MSCellType="ContentFoot" -->
		<div style="width: 100%; height:170px">
			<hr />
			<div style="text-align:center;font-weight:bold">Members</div>
			<hr />
			{% for f in members %} <!--display five recently joined members -->
			<div style="float:left;height: 120px;width:24%; text-align:center;padding:0 4px 0 2px"><a href="../profile/{{f}}" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">{{f}}</a><br><img src="../profile_pic/{{f}}.jpg" style="height:100px" /></div>
			{% endfor %}
		</div>
		<div id="comment">
		<form id="form4" name="form4" method="post" action="{{clanName}}/comment">
        <label>
          <form action="">
  			<input type="text" name="comment" value="Make Comments here"  onfocus="this.value=''" style="width: 90%; height: 100%"/>
			<input type="submit" name="button3" id="button3" value="Submit" />
			</form>
        </label>
      </form>
      <p><strong>Comments</strong><br><!--Ability to comment a clan-->
	  {% for f in comments %}
      	&nbsp &nbsp <a href="../profile/{{f.poster}}">{{f.poster}}</a>&nbsp- {{f.userComment}}<br>
		{% endfor %}
      </p>
    </div>
		&nbsp;</td>
			</tr>
</table>
    </div>
        <div id="footer_container">
    footer_container
    </div>
  </div>
</div>
</body>
</html>

